<template>
	<view class="mini-nav">
		<view class="mask" v-show="isShow" @click.stop="showNav"></view>
		<view :class="'nav ' + (isShow ? 'active' : '')" >
			<view class="btn" v-show="!isShow" @click.stop="showNav">
				<text class="iconfont icon-left-arrow"></text>
				<text>快速导航</text>
			</view>
			<view class="btn" v-show="isShow" @click.stop="showNav">
				<text class="iconfont icon-right-arrow"></text>
				<text>收起</text>
			</view>
			<view class="list">
				<view class="item" v-for="item in navList" @click="goUrl(item.pagePath, item.text)">
					<view class="img-box"><image class="img" :src="item.iconPath"></image></view>
					<view>{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js';
	export default {
		data () {
			return {
				isShow: false
			}
		},
		props: {
			navList: {
				type: Array,
				default: []
			}
		},
		methods:{
			showNav () {
				this.isShow = !this.isShow
			},
			goUrl (url, title) {
				common.parseUrl(url, '', false, title);
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.mini-nav
		.mask
			position fixed
			top 0
			left 0
			right 0
			bottom 0
			background rgba(0, 0, 0, .7)
			z-index 50
		.nav
			position fixed
			right 0
			bottom 120px
			z-index 51
			transform translateX(100%)
			transition all .3s
			&.active
				transform translateX(0)
			.btn
				background rgba(0, 0, 0, .5)
				color #fff
				font-size 12px
				width 45px
				height 40px
				display flex
				justify-content center
				align-items center
				border-radius 5px 0 0 5px
				position absolute
				left -45px
				top 0
				bottom 0
				margin auto
			.list
				background #fff
				display flex
				align-items center
				border-radius 5px 0 0 5px
				.item
					font-size 12px
					color #333
					padding 8px 6px
					width 50px
					box-sizing border-box
					text-align center
					.img-box
						width 22px
						height 22px
						margin 0 auto 3px
						.img
							width 100%
							height 100%
</style>
